<template>
  <div id="calssify">
    <main>
      <ul class="ulclass">
        <li>
          <h2>其他情趣</h2>
          <div class="list">
            <a @click="gotoList">全部</a>
            <a @click="gotoList">套套大全</a>
            <a @click="gotoList">润 滑 油</a>
            <a @click="gotoList">奢侈/个性</a>
          </div>
        </li>
        <li>
          <h2>SM 用品</h2>
          <div class="list">
            <a href="###">全部</a>
            <a href="###">套套大全</a>
            <a href="###">润 滑 油</a>
            <a href="###">奢侈/个性</a>
          </div>
        </li>
        <li>
          <h2>套装组合</h2>
          <div class="list">
            <a href="###">全部</a>
            <a href="###">套套大全</a>
            <a href="###">润 滑 油</a>
            <a href="###">奢侈/个性</a>
          </div>
        </li>
        <li>
          <h2>Les/Gay 用品</h2>
          <div class="list">
            <a href="###">全部</a>
            <a href="###">套套大全</a>
            <a href="###">润 滑 油</a>
            <a href="###">奢侈/个性</a>
          </div>
        </li>
        <li>
          <h2>情趣内衣</h2>
          <div class="list">
            <a href="###">全部</a>
            <a href="###">套套大全</a>
            <a href="###">润 滑 油</a>
            <a href="###">奢侈/个性</a>
          </div>
        </li>
        <li>
          <h2>男士用品</h2>
          <div class="list">
            <a href="###">全部</a>
            <a href="###">套套大全</a>
            <a href="###">润 滑 油</a>
            <a href="###">奢侈/个性</a>
          </div>
        </li>
        <li>
          <h2>潮吹刺激</h2>
          <div class="list">
            <a href="###">全部</a>
            <a href="###">套套大全</a>
            <a href="###">润 滑 油</a>
            <a href="###">奢侈/个性</a>
          </div>
        </li>
        <li>
          <h2>女士用品</h2>
          <div class="list">
            <a href="###">全部</a>
            <a href="###">套套大全</a>
            <a href="###">润 滑 油</a>
            <a href="###">奢侈/个性</a>
          </div>
        </li>
      </ul>
    </main>
  </div>
</template>

<script>
export default {
  methods: {
    gotoList() {
      this.$router.push({ name: "list" });
    }
  }
};
</script>

<style>
html,
body {
  height: 100%;
  width: 100%;
}

#calssify {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

#calssify a {
  text-decoration: none;
}

#calssify main {
  flex: 1;
  overflow-y: scroll;
}

#calssify main .ulclass li {
  height: 4.853333rem;
}

#calssify main .ulclass li h2 {
  height: 2.666667rem;
  text-align: center;
  line-height: 2.666667rem;
  color: #fff;
  font-size: 0.4rem;
  background: rgba(0, 0, 0, 0.5);
}

#calssify main .ulclass li .list {
  width: 100%;
  height: 2.186667rem;
  display: flex;
  flex-wrap: wrap;
  background: #fff;
}

#calssify main .ulclass li .list a {
  display: block;
  width: 50%;
  height: 1.093333rem;
  line-height: 1.093333rem;
  text-align: center;
  color: #666;
  font-size: 0.373333rem;
}

#calssify main .ulclass li:nth-of-type(1) {
  background: url(http://www.mybanana.com.cn/images/img_14559527502063.jpg)
    no-repeat;
  background-size: cover;
}

#calssify main .ulclass li:nth-of-type(2) {
  background: url(http://www.mybanana.com.cn/images/img_14559531554717.jpg)
    no-repeat;
  background-size: cover;
}

#calssify main .ulclass li:nth-of-type(3) {
  background: url(http://www.mybanana.com.cn/images/img_14559440081792.jpg)
    no-repeat;
  background-size: cover;
}

#calssify main .ulclass li:nth-of-type(4) {
  background: url(http://www.mybanana.com.cn/images/img_14538670248323.jpg)
    no-repeat;
  background-size: cover;
}

#calssify main .ulclass li:nth-of-type(5) {
  background: url(http://www.mybanana.com.cn/images/img_14559466889596.jpg)
    no-repeat;
  background-size: cover;
}

#calssify main .ulclass li:nth-of-type(6) {
  background: url(http://www.mybanana.com.cn/images/img_14537904319503.jpg)
    no-repeat;
  background-size: cover;
}

#calssify main .ulclass li:nth-of-type(7) {
  background: url(http://www.mybanana.com.cn/images/img_14559497039447.jpg)
    no-repeat;
  background-size: cover;
}

#calssify main .ulclass li:nth-of-type(8) {
  background: url(http://www.mybanana.com.cn/images/img_14559505723739.jpg)
    no-repeat;
  background-size: cover;
}

#calssify footer {
  height: 1.333333rem;
  background: #000;
}
</style>